<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"><meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Kuch Bhi Kya !</title>

<link rel="stylesheet" type="text/css" href="/css/ui-darkness/jquery-ui-1.8.4.custom.css" />
<link rel="stylesheet" type="text/css" href="/css/kbk.css" />

<style>
  body {
    font-family: 'Trebuchet MS', Verdana, Arial, sans-serif;
    font-size: 14px;
    background-color: #666;
    color: #999;
  }
</style>

<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>    
<script type="text/javascript" src="/js/kbk.js"></script>
<script type="text/javascript" src="/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/feedback.js"></script>
</head>

<body>

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '159760274050584',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });

    FB.Event.subscribe('auth.sessionChange', checkStatus);
    FB.getLoginStatus(checkStatus);
  };

  function checkStatus(response) {
    if (response.status == "connected") {
        getMe();
        $("#login-button").hide();
    }
    else if (response.status == "notConnected") {
        UserInfo.uid = 0;
        $("#login-button").show();
        getQList();
    }
  }

  //gets the current user info
  function getMe() {
    FB.api('/me', function(response) {
        UserInfo.uid = response.id;
        UserInfo.name = response.name;
        getUserInfo();
    });
  }


  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

<div class="">

  <!-- header area -->
  <div id="header-area" class="general ui-widget-header">
    <div style="float: left;">
    <img src="/css/kbk_hdr.png">
    </div>
    <div style="float: right;">
      <a href="#" onclick="openAbout();">About</a> | 
      <a href="#" onclick="openFeedback();">Feedback</a>
    </div> 
    <div style="clear: both;"> </div>
  </div>

  <div style="padding-top: 1%;"></div>

  <!-- play area -->
  <div id="play-area" class="">

    <!-- player container -->
    <div id="player-cont" class="general kbk-cont">
      <div id="vplayer" class="player">
        <div id="ytapiplayer">
          You need Flash player 8+ and JavaScript enabled to view this video.
        </div>
      </div>
      <div id="qplayer" class="player">
        <div id="">
          You need a question to view this
        </div>
      </div>
      <div id="player_ol" class="player">
      <img src="/css/kbk_main.png" style="display: block; margin: 0 auto; text-align: center;">
      </div>
      <div style="clear: both;"></div>
    </div>

    <div style="padding-top: 1%;"></div>
    <!-- qa container -->
    <div id="qa-cont" class="general kbk-cont">
      <div id="question-area" class="ui-widget-header general">
        <div id="question">
          Enjoy the clips and answer the question to win points
        </div>
      </div>
      <div style="padding-top: 1%;"></div>
      <div id="choices-area" class="ui-widget-content general">
        <div id="choices">
        </div>
      </div>

      <!-- button -->
      <div style="padding-top: 1%;"></div>
      <button id="choice" style="width: 100%;">Submit</button>
      <button id="next" style="width: 100%;">Play</button>
      <button id="skip" style="width: 100%;">Skip</button>
    </div>

  </div>

  <!-- control area -->
  <div id="control-area" class="general kbk-cont">
    <div id="login-button">
      <fb:login-button></fb:login-button>
    </div>
    <br>
    <div id="status">
      Please Login to your facebook account
    </div>
    <br>
    <div class='countdown countdown_sm ui-widget-content'>
      Score
      <div id="score" class='countdown countdown_sm ui-widget-header'>0</div>
    </div>
    <br>
    <div class='countdown countdown_sm ui-widget-content' style='width: 48%; float: left;'>
      Level
      <div id="level" class='countdown countdown_sm ui-widget-header'>0</div>
    </div>
    <div class='countdown countdown_sm ui-widget-content' style='width: 48%; float: right;'>
      Win %
      <div id="win_pct" class='countdown countdown_sm ui-widget-header'>0</div>
    </div>
    <div style="clear: both;"></div>

    <br><hr><br>
<!--
    <button id="invite" style="width: 100%;">Invite</button>
-->
    <div style="padding: 2%;"><fb:like colorscheme="dark" layout="button_count"> </fb:like></div>
    <div style="padding-top: 1%;"></div>
    <button id="create" style="width: 100%;">Create Quiz</button>
  </div>

  <div style="clear: both;"> </div>
</div>

<div id="feedback" title="Feedback">
  <form class="" id="fbform" method="post" action="">
     <p>
       <label for="fname">Name</label><br>
       <input id="fname" name="name" size="25"/>
     </p>
     <p>
       <label for="femail">Email</label><br>
       <input id="femail" name="email" size="25"/>
     </p>
     <p>
       <label for="fcomm">Comment</label><br>
       <textarea id="fcomm" name="comment" cols=50></textarea>
     </p>
     <p>
       <input name="submit" type="submit" value="Submit"/>
     </p>
  </form>
</div>

<div id="create-quiz" title="Quiz Creator">
Coming Soon !
</div>

<!--
<script src="http://cdn.wibiya.com/Toolbars/dir_0613/Toolbar_613240/Loader_613240.js" type="text/javascript"></script>
-->
</body>
</html>
